import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	withRouter
} from 'react-router-dom';
import {
	SearchAdvanced,
} from 'weaver-mobile-page';
import { SearchBar,WingBlank, Icon,Tools, Popover} from 'weaver-mobile';
const getLabel = Tools.getLabel;
const Item = Popover.Item;

@withRouter
@observer
export default class Search extends Component {
	handleExtraButtonClick = (key) => {
		const {
			history,
			store
		} = this.props, {
			subordinateSearch,
			setPopoverVisible
		} = store;

		if (key === 'advanced') {
			history.push(subordinateSearch.path);
		}else{
			setPopoverVisible(true);
		}
	}

	render() {
		const {
			store
		} = this.props, {
			subordinateSearch,
			popoverVisible,
			setPopoverVisible,
			alllevel,
			handleSearchAdvancedSubmit,
			searchBarValue,
			handleSearchBarChange,
			handleSearchBarSubmit,
			onPopoverSelect,
		} = store;

		return (
			<div>
				<SearchBar
			        className="search-select"
			        placeholder={getLabel(390068, '请输入姓名/首字母/电话/编号')}
			        value={searchBarValue}
			        showExtraButton
			        extraButton={[
			          { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
			          { key: 'drop', show: (
			          	<Popover
			          		mask
			          		overlayClassName="fortest"
			          		overlayStyle={{ color: 'currentColor' }}
			          		visible={popoverVisible}
			          		onVisibleChange={setPopoverVisible}
			          		overlay={[<Item>{(alllevel === '0') ? getLabel(83783,"显示下级下属") : getLabel(390066,"隐藏下级下属")}</Item>]}
			          		onSelect={onPopoverSelect}
			          	>
			          		<Icon key="ellipsis" type="ellipsis" />
			          	</Popover>
			          ) },
			        ]}
			        onChange={val => handleSearchBarChange(val) }
			        onSubmit={() => handleSearchBarSubmit()}
			        onExtraButtonClick={(key) => this.handleExtraButtonClick(key) }
			    />
				<SearchAdvanced store={subordinateSearch} onSubmit={handleSearchAdvancedSubmit}/>
			</div>
			
		);
	}
}
